/**
 * 活动菜单 活动详情页面
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" @click="back()">
      <el-breadcrumb-item :to="{ path: '/Activity/activityList', query:{formInline:formInline}}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情页面</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 个人详情信息 -->
    <div class="personaldetails">
        <div class="personaldetails_text">
            <div class="personaldetails_text_detail">
                <el-avatar shape="circle" :size="200"  :src="activityDetail.image"></el-avatar>
            </div>
            <div class="personaldetails_text_detail">活动序号：
                <span>{{activityDetail.id}}</span>
            </div>
            <div class="personaldetails_text_detail">活动名称：
                <span>{{activityDetail.name}}</span>
            </div>
            <div class="personaldetails_text_detail">参与人数限制：
                <span>{{activityDetail.capacity}}</span>
            </div>
            <div class="personaldetails_text_detail">开始时间：
                <span>{{activityDetail.begin_time}}</span>
            </div>
            <div class="personaldetails_text_detail">结束时间：
                <span>{{activityDetail.end_time}}</span>
            </div>
            <div class="personaldetails_text_detail">申请开始时间：
                <span>{{activityDetail.apply_begin_time}}</span>
            </div>
            <div class="personaldetails_text_detail">申请结束时间：
                <span>{{activityDetail.apply_end_time}}</span>
            </div>
            <div class="personaldetails_text_detail jump" @click="jump(activityDetail.originator)">发起人：
              <span>{{activityDetail.originator}}</span>
          </div>
          <div class="personaldetails_text_detail">收费方式：
              <span>{{activityDetail.charge}}</span>
          </div>
          <div class="personaldetails_text_detail">具体收费量：
              <span>{{activityDetail.charge_detail}}</span>
          </div>
          <div class="personaldetails_text_detail">父创意：
              <span>{{activityDetail.father}}</span>
          </div>
          <div class="personaldetails_text_detail">是否需要申请：
              <span>{{activityDetail.need_apply}}</span>
          </div>
          <div class="personaldetails_text_detail">自动回复信息：
              <span>{{activityDetail.auto_return}}</span>
          </div>
          <div class="personaldetails_text_detail">已完成发布：
              <span>{{activityDetail.finished}}</span>
          </div>
          <div class="personaldetails_text_detail">
            <tags  :activityI="para"></tags>
        </div>
        </div>
        <div class="personaldetails_text">
            <div class="personaldetails_text_detail">简介：
                <div v-html="activityDetail.introduction" style="white-space:pre-wrap">{{activityDetail.introduction}}</div>
            </div>


        </div>
    </div>
    <!-- 参与活动列表 -->
    <el-table size="small" :data="activityDetail.ParticipantsList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;" class="partActivity">
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column sortable prop="id" label="序号" width="130">
        </el-table-column>
        <el-table-column sortable prop="user__id" label="参与者昵称" width="200">
        </el-table-column>
        <el-table-column sortable  label="参与者头像" width="200">
          <template slot-scope="scope">
            <el-image :src="scope.row.user__portrait"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="jumpPerson(scope.row.user__id)">查看</el-button>    
          </template>
        </el-table-column>
    </el-table>
    
  </div>
</template>

<script>
  import {loadAct,loadActPartic,editActTag,loadAllTags,newTagI} from "../../api/basisMG"
  import marked from 'marked'
  import tags from "../../components/tags"
export default {
  data() {
    return {
      para:{
        actID:1
      },
      loading:true,
      formInline:{
        currentPage: 1,
        pageSize: 10,
        total: 11
      },      
      activityDetail:{
          id:"",
          name:"",
          capacity:"",
          locate:"",
          locate_name:"",
          begin_time:"",
          end_time:"",
          apply_begin_time:"",
          apply_end_time:"",
          introduction:"",
          originator:"",
          charge:"",
          charge_detail:"",
          father:"",
          need_apply:"",
          auto_return:"",
          finished:"",
          tag:"",
          ParticipantsList:[
              {

              },
              {
                  
              }
          ]

      }
    }
  },
  // 注册组件
  components: {
    tags
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.para.actID = this.$route.query.activityId;
    this.formInline = this.$route.query.formInline;
    this.getdata(this.formInline)
    
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    getdata(parameter) {
       loadAct(this.para)
        .then(res => {
          this.loading = true
          this.activityDetail = res.data
          var val = marked(this.activityDetail.introduction || '', {sanitize: true}) 
          this.activityDetail.introduction = val     
        //   this.deletedTag = res.data.tag
          loadActPartic(this.para)
          .then(res=>{
            console.log(res)
            this.activityDetail.ParticipantsList = res.data.ParticipantsList
            this.loading = false
            console.log(this.activityDetail.ParticipantsList = res.data.ParticipantsList)
          })
        })
        .catch(err => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
        })
    },
    jump(userid){
        this.$router.push({path:"/User/userDetail",query:{userId:this.activityDetail.originator}})
    },
    jumpPerson(userid){
      this.$router.push({path:"/User/userDetail",query:{userId:userid}})
    },
  }
}
</script>

<style scoped>
.personaldetails{
    display: flex;
    float: left;
    width: 100%;
}
.personaldetails_text{
    width: 40%;
    margin-left: 10%;
}
.personaldetails_text_detail{
    margin-top: 5%;
}
  .jump{
    color: red;
  } 
</style>

 
